<template>
    <div>
        <el-table ref="BAAApplyDepListTablesRef" v-loading="loading" :data="BAAApplyDepListTables"
            @selectionChange="selectChangeHandle"
            @row-dblclick="handleRowDblClick"
            stripe
            :row-style="tableRowStyle"
             show-overflow-tooltip v-model="isShow" border>
            <el-table-column label="办案单位名称" prop="unitname" />
            <el-table-column label="办案单位部门" prop="depname" />
            <el-table-column label="申请日期" prop="adddate" />
            <el-table-column label="承办人" prop="asker_id" />
            <el-table-column label="警务区名称" prop="policeareaname" />
            <el-table-column label="申请进入时间" prop="startdate" />
            <el-table-column label="预计离开时间" prop="enddate" />
            <el-table-column label="办案部门审批领导" prop="approvaldetail" width="140" />
            <!-- <el-table-column label="状态" prop="state"  width="120"/> -->
            <el-table-column label="状态" prop="state" width="120">
                <template #default="scope">
                    <dict-tag :options="nj_apply_status" :value="scope.row.state" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="140" align="center">
                <template #default="scope">
                    <el-button v-if="scope.row.state == 1" link size="small" type="primary"
                        @click="AddEditBAApplyRef.showEditBAApply(scope.row, '指定居所使用申请-法警负责人审批', 'fjApprove', '3')">
                        <el-icon class="me-1">
                            <Edit />
                        </el-icon>
                        审批
                    </el-button>
                    <el-button link size="small" type="primary"
                        @click="AddEditBAApplyRef.showEditBAApply(scope.row, '指定居所使用申请-法警负责人审批', 'See', '3')">
                        <el-icon class="me-1">
                            <View />
                        </el-icon>
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" v-model:limit="paging.pageSize" v-model:page="paging.pageNum" :total="total"
            @pagination="getPoliceApplyDepLists" />
        <AddEditBAApplyReg ref="AddEditBAApplyRef" @getBAApplyList="getPoliceApplyDepLists" />
    </div>
</template>
<script setup>
import AddEditBAApplyReg from "@/components/BAApplyReg/BAApplyReg.vue";
import { getCurrentInstance } from "vue";

import { BAApplydepList } from "@/api/BAApply/BAApply";
import PageEnum from "@/enum/PageEnum.js";

const { proxy } = getCurrentInstance();

const { nj_anjian_type, nj_apply_status } = proxy.useDict('nj_anjian_type', 'nj_apply_status')

const isShow = ref(false)

const BAAApplyDepListTablesRef = ref()
const total = ref(0)

const deleteStatus = ref(true)
const AddEditBAApplyRef = ref({})
const loading = ref(false)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})
const queryParams = ref({
    type: 3,
    state: null
})
const BAAApplyDepListTables = ref([])

const emit = defineEmits(["backtotal"]);

onMounted(() => {
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
const changeShowStatus = () => {
    isShow.value = !isShow.value
}
const showZJAprove = (Params) => {
    queryParams.value.depname = Params.depname
    queryParams.value.params = Params.params
    if (Params.state == null) {
        queryParams.value.state = '1'
    } else if (Params.state == '99') {
        queryParams.value.state = null
    } else {
        queryParams.value.state = Params.state
    }
    getPoliceApplyDepLists()
    changeShowStatus()
}
// 获取调解室房间列表
const getPoliceApplyDepLists = async () => {
    loading.value = true
    await BAApplydepList(queryParams.value, paging.value).then(res => {
        BAAApplyDepListTables.value = res.rows
        total.value = res.total
        loading.value = false
        setTimeout(() => {
            if (queryParams.value.state === '1' || queryParams.value.state === null || queryParams.value.state === '99') {
                emit("backtotal", res.total);
            }
        }, 100);
    })
}

const selectChangeHandle = (data) => {
    deleteStatus.value = data.length === 0;
}
const handleRowDblClick = (row) => {
    AddEditBAApplyRef.value.showEditBAApply(row, '指定居所使用申请-法警负责人审批', 'See', '3')
}

defineExpose({ showZJAprove })


</script>
<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
</style>